import React, { useState } from 'react';
import { List, Card, Button } from 'antd';
import { getPrice3 } from '../utils';
import { TypeMap } from '../type';
type dataType = { name?: string; originalPrice: number; type: string };
const Index = () => {
  const [showCode, setShowCode] = useState<boolean>(false);
  const [showResult, setShowResult] = useState<boolean>(false);
  const data: dataType[] = [
    {
      originalPrice: 100,
      type: 'pre-sale',
    },
    {
      originalPrice: 50,
      type: 'promotion',
    },
    {
      originalPrice: 100,
      type: 'promotion',
    },
    {
      originalPrice: 100,
      type: '',
    },
    {
      originalPrice: 50,
      type: 'black-friday',
    },
    {
      originalPrice: 100,
      type: 'black-friday',
    },
    {
      originalPrice: 150,
      type: 'black-friday',
    },
    {
      originalPrice: 200,
      type: 'black-friday',
    },
  ];
  const funcStr = `
  /**
   * 策略-预售商品价格规则
   * @param {*} originalPrice
   * @returns
   */
  function preSalePrice(originalPrice: number) {
    return originalPrice * 0.8;
  }
  /**
   * 策略-促销商品价格规则
   * @param {*} originalPrice
   * @returns
   */
  function promotionPrice(originalPrice: number) {
    if (originalPrice < 100) {
      return originalPrice * 0.9;
    } else {
      return originalPrice - 15;
    }
  }
  /**
   * 策略-黑色星期五促销规则
   * @param {*} originalPrice
   * @returns
   */
  function blackFridayPrice(originalPrice: number) {
    if (originalPrice >= 100 && originalPrice < 200) {
      return originalPrice - 20;
    } else if (originalPrice >= 200) {
      return originalPrice - 50;
    } else {
      return originalPrice * 0.8;
    }
  }
  /**
   * 策略-默认商品价格
   * @param {*} originalPrice
   * @returns
   */
  function defaultPrice(originalPrice: number) {
    return originalPrice;
  }

  /** 环境map */
  const priceStrategies: { [key: string]: (originalPrice: number) => number } = {
    'pre-sale': preSalePrice,
    'promotion': promotionPrice,
    'black-friday': blackFridayPrice,
    'default': defaultPrice,
  };
  /**
   * 应用函数
   * @param originalPrice
   * @param type
   * @returns
   */
  const getPrice3 = (originalPrice: number, type: string) => {
    return priceStrategies[type]?.(originalPrice) || originalPrice;
  };`;
  return (
    <div>
      <h3>策略模式</h3>
      <Button
        style={{ margin: '20px 0' }}
        type="link"
        onClick={() => setShowCode(!showCode)}
      >
        {showCode ? '隐藏代码' : '展示代码'}
      </Button>
      {showCode && (
        <pre style={{ background: '#eee', padding: 20 }}>{funcStr}</pre>
      )}
      <Button
        style={{ margin: '20px 0' }}
        type="link"
        onClick={() => setShowResult(!showResult)}
      >
        {showResult ? '隐藏结果' : '展示结果'}
      </Button>
      {showResult && (
        <List
          grid={{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }}
          dataSource={data}
          renderItem={(item) => (
            <List.Item>
              <Card title={TypeMap[item.type] || '正常销售'}>
                <div>原价：{item.originalPrice}</div>
                <div>
                  现价：{getPrice3(item.originalPrice, item.type || 'default')}
                </div>
              </Card>
            </List.Item>
          )}
        />
      )}
    </div>
  );
};
export default Index;
